<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';

// 顶部标签页状态
const activeName = ref('first')

// 左侧导航选中项
const activeNavItem = ref('order-single')

// 导航项数据
const navItems = ref([
  {
    group: '签单提成',
    items: [
      { id: 'order-single', name: '按单提成模式', status: '未启用' },
      { id: 'order-ladder', name: '按阶梯比例提成模式', status: '未启用' }
    ]
  },
  {
    group: '会计服务提成',
    items: [
      { id: 'accounting-single', name: '单会计负责模式', status: '未启用' },
      { id: 'accounting-multi', name: '多会计分工模式', status: '未启用' }
    ]
  },
  {
    group: '项目外勤提成',
    items: [
      { id: 'field-single', name: '单外勤负责模式', status: '未启用' },
      { id: 'field-multi', name: '多外勤协作模式', status: '未启用' }
    ]
  },
  {
    group: '内部推荐提成',
    items: [
      { id: 'referral-single', name: '按单提成模式', status: '未启用' }
    ]
  }
])

// 处理导航项点击
const handleNavItemClick = (itemId) => {
  activeNavItem.value = itemId
}

// 处理顶部标签页点击
const handleClick = (tab, event) => {
  console.log(tab, event);
}

// 获取当前选中的导航项信息
const getCurrentNavItem = () => {
  for (const group of navItems.value) {
    for (const item of group.items) {
      if (item.id === activeNavItem.value) {
        return item
      }
    }
  }
  return null
}

// 获取当前选中的组信息
const getCurrentNavGroup = () => {
  for (const group of navItems.value) {
    for (const item of group.items) {
      if (item.id === activeNavItem.value) {
        return group.group
      }
    }
  }
  return ''
}

// 模拟表格数据
const tableData2 = [
  {
    id: 1,
    range: '百账汇（广州）科技有限公司',
    people:'张小姐'
  }
]

// 角色开关状态
const roleSwitches = ref({
  accounting: false,
  tax: false,
  consultant: false,
  audit: false,
  invoice: false,
  finisher: false
})

// 模块启用状态
const moduleEnabled = ref({
  'order-single': false,
  'order-ladder': false,
  'accounting-single': false,
  'accounting-multi': false,
  'field-single': false,
  'field-multi': false,
  'referral-single': false
})

// 对话框状态
const dialogVisible = ref({
  batchSetting: false,
  addLadder: false
})

// 当前操作的批量设置类型
const currentBatchType = ref('')

// 打开批量设置对话框
const openBatchSetting = (type) => {
  currentBatchType.value = type
  dialogVisible.value.batchSetting = true
  ElMessage({
    message: '批量设置对话框已打开',
    type: 'info'
  })
}

// 打开增加档位对话框
const openAddLadder = () => {
  dialogVisible.value.addLadder = true
  ElMessage({
    message: '增加档位对话框已打开',
    type: 'info'
  })
}

// 关闭对话框
const closeDialog = (dialogName) => {
  dialogVisible.value[dialogName] = false
  ElMessage({
    message: '对话框已关闭',
    type: 'success'
  })
}

// 处理角色开关变化
const handleRoleSwitchChange = (role) => {
  ElMessage({
    message: `角色权限已更新: ${role}`,
    type: 'primary'
  })
}

// 处理启用按钮点击
const handleEnableClick = (moduleId) => {
  moduleEnabled.value[moduleId] = true
  // 更新导航项状态
  for (const group of navItems.value) {
    for (const item of group.items) {
      if (item.id === moduleId) {
        item.status = '已启用'
        ElMessage({
          message: `已成功启用: ${item.name}`,
          type: 'success'
        })
        break
      }
    }
  }
}
</script>

<template>
    <div class="my-clue">
        <div class="top-filter">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="提成规则设置" name="first"></el-tab-pane>
            <el-tab-pane label="权限设置" name="second"></el-tab-pane>
            </el-tabs>
        </div>
        <div v-if="activeName === 'first'" class="table-area">
            <div class="table-area-table">
                <!-- 左右分栏布局 -->
                <div class="commission-layout">
                    <!-- 左侧固定导航 -->
                    <el-affix :offset="140">
                    <div class="left-nav">
                        <div v-for="group in navItems" :key="group.group" class="nav-group">
                            <div class="nav-title">{{ group.group }}</div>
                            <div 
                                v-for="item in group.items" 
                                :key="item.id"
                                class="nav-item"
                                :class="{ active: activeNavItem === item.id }"
                                @click="handleNavItemClick(item.id)"
                            >
                                {{ item.name }} <span class="status">{{ item.status }}</span>
                            </div>
                        </div>
                    </div>
                    </el-affix>
                    <!-- 右侧内容区域 -->
                    <div class="right-content">
                        <div class="content-header">
                            <h3>{{ getCurrentNavGroup() }}</h3>
                            <el-divider />
                        </div>
                        <div class="content-main">
                            <!-- 签单提成 - 按单提成模式 -->
                            <template v-if="activeNavItem === 'order-single'">
                                <div class="mode-info">
                                    <span class="mode-label">按单提成模式</span>
                                    <span class="mode-status">未启用</span>
                                    <span class="mode-desc">签一单提一单，提给签单人</span>
                                    <button class="enable-btn" @click="handleEnableClick('order-single')">启用</button>
                                </div>
                                
                                <!-- 合并周期合同和单次业务订单到一个div -->
                                <div class="setting-combined">
                                    <!-- 左侧内容区域 -->
                                    <div class="setting-content">
                                        <!-- 周期合同设置 -->
                                        <div class="setting-group">
                                            <h4>周期合同</h4>
                                            <div class="setting-row">
                                                <span class="setting-label">计提时机：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="cycle-timing" checked :disabled="!moduleEnabled.order-single"> 产生收入就提
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="cycle-timing" :disabled="!moduleEnabled.order-single"> 其他选项
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">计提人：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="cycle-person" checked :disabled="!moduleEnabled.order-single"> 合同签单人
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="cycle-person" :disabled="!moduleEnabled.order-single"> 收费及支出提交人
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">提成基数：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="cycle-base" checked :disabled="!moduleEnabled.order-single"> 按审核通过的收入
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="cycle-base" :disabled="!moduleEnabled.order-single"> 按审核通过的收入 - 支出
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">提成比例/金额批量设置：</span>
                                                <label class="checkbox-label-inline">
                                                    <input type="checkbox" :disabled="!moduleEnabled.order-single"> 未进行设置无法计算提成
                                                </label>
                                                <div class="setting-info-inline">
                                                    当前共有 29 份合同，有1份合同未进行设置
                                                </div>
                                                <button class="batch-btn" :disabled="!moduleEnabled.order-single" @click="openBatchSetting('regular')">批量设置</button>
                                            </div>
                                        </div>
                                        
                                        <!-- 单次业务订单设置 -->
                                        <div class="setting-group">
                                            <h4>单次业务订单</h4>
                                            <div class="setting-row">
                                                <span class="setting-label">计提时机：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="single-timing" checked :disabled="!moduleEnabled.order-single"> 产生收入就提
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="single-timing" :disabled="!moduleEnabled.order-single"> 订单完结后计提
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">计提人：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="single-person" checked :disabled="!moduleEnabled.order-single"> 订单签单人
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="single-person" :disabled="!moduleEnabled.order-single"> 收费及支出提交人
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">提成基数：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="single-base" checked :disabled="!moduleEnabled.order-single"> 按审核通过的收入
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="single-base" :disabled="!moduleEnabled.order-single"> 按审核通过的收入 - 支出
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">提成比例/金额批量设置：</span>
                                                <label class="checkbox-label-inline">
                                                    <input type="checkbox" :disabled="!moduleEnabled.order-single"> 未进行设置无法计算提成
                                                </label>
                                                <div class="setting-info-inline">
                                                    当前共有 11 份订单，有2份订单未进行设置
                                                </div>
                                                <button class="batch-btn" :disabled="!moduleEnabled.order-single" @click="openBatchSetting('single')">批量设置</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 自定义垂直分割线 -->
                                    <div class="custom-vertical-divider"></div>
                                    <!-- 右侧说明区域 -->
                                    <div class="content-note-right">
                                        <h4>说明</h4>
                                        <ul>
                                            <li>提成比例或金额，可以到对应的每一个合同和订单上进行设置</li>
                                            <li>可以在设置产品组合时进行预置，后续创建合同订单时会自动带入提成比例或金额</li>
                                        </ul>
                                    </div>
                                </div>
                            </template>
                            
                            <!-- 项目外勤提成 - 单外勤负责模式 -->
                            <template v-else-if="activeNavItem === 'field-single'">
                                <div class="mode-info">
                                    <span class="mode-label">单外勤负责模式</span>
                                    <span class="mode-status">未启用</span>
                                    <span class="mode-desc">单个项目由一个人负责办完，办结一单提一单</span>
                                    <button class="enable-btn" @click="handleEnableClick('field-single')">启用</button>
                                </div>
                                
                                <div class="setting-combined">
                                    <!-- 左侧内容区域 -->
                                    <div class="setting-content">
                                        <div class="setting-group">
                                            <h4>计提人</h4>
                                            <div class="setting-row">
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="field-single-person" checked :disabled="!moduleEnabled.field-single"> 提给项目完成人
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <div class="setting-group">
                                            <h4>提成逻辑</h4>
                                            <div class="setting-row">
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="field-single-logic" checked :disabled="!moduleEnabled.field-single"> 按项目上的设置计提
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <div class="setting-group">
                                            <h4>初始化提成比例/金额 <span style="color: #F56C6C; font-size: 12px;">①未进行设置无法计算提成</span></h4>
                                            <div class="setting-row">
                                                <span class="setting-label">当前共有 2 个项目，有2个项目未进行设置</span>
                                                <button class="batch-btn" :disabled="!moduleEnabled.field-single" @click="openBatchSetting('field')">批量设置</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 自定义垂直分割线 -->
                                    <div class="custom-vertical-divider"></div>
                                    <!-- 右侧说明区域 -->
                                    <div class="content-note-right">
                                        <h4>说明</h4>
                                        <ul>
                                            <li>提成比例和固定金额，需要在每个项目中设置</li>
                                            <li>可在项目模板里预置提成比例或金额，创建项目后可自动引用</li>
                                        </ul>
                                    </div>
                                </div>
                            </template>
                            
                            <!-- 项目外勤提成 - 多外勤协作模式 -->
                            <template v-else-if="activeNavItem === 'field-multi'">
                                <div class="mode-info">
                                    <span class="mode-label">多外勤协作模式</span>
                                    <span class="mode-status">未启用</span>
                                    <span class="mode-desc">单个项目的不同步骤由不同的人负责，提给步骤完成人</span>
                                    <button class="enable-btn" @click="handleEnableClick('field-multi')">启用</button>
                                </div>
                                
                                <div class="setting-combined">
                                    <!-- 左侧内容区域 -->
                                    <div class="setting-content">
                                        <div class="setting-group">
                                            <h4>计提人</h4>
                                            <div class="setting-row">
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="field-multi-person" checked :disabled="!moduleEnabled.field-multi"> 提给步骤完成人
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <div class="setting-group">
                                            <h4>提成逻辑</h4>
                                            <div class="setting-row">
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="field-multi-logic" checked :disabled="!moduleEnabled.field-multi"> 按项目步骤上的设置计提
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <a href="#" :disabled="!moduleEnabled.field-multi" :style="{ color: '#409EFF', cursor: moduleEnabled.field-multi ? 'pointer' : 'not-allowed' }">看看怎么设置 &gt;</a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 自定义垂直分割线 -->
                                    <div class="custom-vertical-divider"></div>
                                    <!-- 右侧说明区域 -->
                                    <div class="content-note-right">
                                        <h4>说明</h4>
                                        <ul>
                                            <li>提成比例和固定金额，需要在每个项目中设置</li>
                                            <li>可在项目模板里预置提成比例或金额，创建项目后可自动引用</li>
                                        </ul>
                                    </div>
                                </div>
                            </template>
                            
                            <!-- 内部推荐提成 - 按单提成模式 -->
                            <template v-else-if="activeNavItem === 'referral-single'">
                                <div class="mode-info">
                                    <span class="mode-label">按单提成模式</span>
                                    <span class="mode-status">未启用</span>
                                    <span class="mode-desc">签一单提一单，提给内部推荐人</span>
                                    <button class="enable-btn" @click="handleEnableClick('referral-single')">启用</button>
                                </div>
                                
                                <div class="setting-combined">
                                    <!-- 左侧内容区域 -->
                                    <div class="setting-content">
                                        <!-- 周期合同 -->
                                        <div class="setting-group">
                                            <h4>周期合同</h4>
                                            <div class="setting-row">
                                                <span class="setting-label">计提时机：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="referral-cycle-timing" checked :disabled="!moduleEnabled.referral-single"> 产生收入就提
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">计提人：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="referral-cycle-person" checked :disabled="!moduleEnabled.referral-single"> 内部推荐人
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">提成基数：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="referral-cycle-base" checked :disabled="!moduleEnabled.referral-single"> 按审核通过的收入
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="referral-cycle-base" :disabled="!moduleEnabled.referral-single"> 按审核通过的收入 - 支出
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">提成比例/金额批量设置：</span>
                                                <span style="color: #F56C6C; font-size: 12px;">①未进行设置无法计算提成</span>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">当前共有 29 份合同，有29份合同未进行设置</span>
                                                <button class="batch-btn" :disabled="!moduleEnabled.referral-single" @click="openBatchSetting('referral-cycle')">批量设置</button>
                                            </div>
                                        </div>
                                        
                                        <!-- 单次业务订单 -->
                                        <div class="setting-group">
                                            <h4>单次业务订单</h4>
                                            <div class="setting-row">
                                                <span class="setting-label">计提时机：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="referral-single-timing" checked :disabled="!moduleEnabled.referral-single"> 产生收入就提
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="referral-single-timing" :disabled="!moduleEnabled.referral-single"> 订单完结后计提
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">计提人：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="referral-single-person" checked :disabled="!moduleEnabled.referral-single"> 内部推荐人
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">提成基数：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="referral-single-base" checked :disabled="!moduleEnabled.referral-single"> 按审核通过的收入
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="referral-single-base" :disabled="!moduleEnabled.referral-single"> 按审核通过的收入 - 支出
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">提成比例/金额批量设置：</span>
                                                <span style="color: #F56C6C; font-size: 12px;">①未进行设置无法计算提成</span>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">当前共有 11 份订单，有11份订单未进行设置</span>
                                                <button class="batch-btn" :disabled="!moduleEnabled.referral-single" @click="openBatchSetting('referral-single')">批量设置</button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 自定义垂直分割线 -->
                                    <div class="custom-vertical-divider"></div>
                                    <!-- 右侧说明区域 -->
                                    <div class="content-note-right">
                                        <h4>说明</h4>
                                        <ul>
                                            <li>提成比例或金额，可以到对应的每一个合同和订单上进行设置</li>
                                            <li>可以在设置产品组合时进行预置，后续创建合同订单将会自动带入提成比例或金额</li>
                                        </ul>
                                    </div>
                                </div>
                            </template>
                            
                            <!-- 签单提成 - 按阶梯比例提成模式 -->
                            <template v-else-if="activeNavItem === 'order-ladder'">
                                <div class="mode-info">
                                    <span class="mode-label">按阶梯比例提成模式</span>
                                    <span class="mode-status">未启用</span>
                                    <span class="mode-desc">根据总业绩对应阶梯比例，提给签单人</span>
                                    <button class="enable-btn" @click="handleEnableClick('order-ladder')">启用</button>
                                </div>
                                
                                <div class="setting-combined">
                                    <!-- 左侧内容区域 -->
                                    <div class="setting-content">
                                        <!-- 周期合同设置 -->
                                        <div class="setting-group">
                                            <h4>周期合同</h4>
                                            <div class="setting-row">
                                                <span class="setting-label">计提时机：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="ladder-cycle-timing" checked :disabled="!moduleEnabled.order-ladder"> 产生收入就提
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">计提人：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="ladder-cycle-person" checked :disabled="!moduleEnabled.order-ladder"> 合同签单人
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="ladder-cycle-person" :disabled="!moduleEnabled.order-ladder"> 收费及支出提交人
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">提成基数：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="ladder-cycle-base" checked :disabled="!moduleEnabled.order-ladder"> 按审核通过的收入
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="ladder-cycle-base" :disabled="!moduleEnabled.order-ladder"> 按审核通过的收入 - 支出
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <!-- 单次业务订单设置 -->
                                        <div class="setting-group">
                                            <h4>单次业务订单</h4>
                                            <div class="setting-row">
                                                <span class="setting-label">计提时机：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="ladder-single-timing" checked :disabled="!moduleEnabled.order-ladder"> 产生收入就提
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="ladder-single-timing" :disabled="!moduleEnabled.order-ladder"> 订单完结后计提
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">计提人：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="ladder-single-person" checked :disabled="!moduleEnabled.order-ladder"> 订单签单人
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="ladder-single-person" :disabled="!moduleEnabled.order-ladder"> 收费及支出提交人
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">提成基数：</span>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="ladder-single-base" checked :disabled="!moduleEnabled.order-ladder"> 按审核通过的收入
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="ladder-single-base" :disabled="!moduleEnabled.order-ladder"> 按审核通过的收入 - 支出
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <!-- 阶梯设置 -->
                                        <div class="setting-group">
                                            <h4>阶梯设置</h4>
                                            <div class="ladder-setting">
                                                <div class="ladder-input">
                                                    <button class="add-ladder-btn" :disabled="!moduleEnabled.order-ladder" @click="openAddLadder()">+ 增加档位</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 自定义垂直分割线 -->
                                    <div class="custom-vertical-divider"></div>
                                    <!-- 右侧说明区域 -->
                                    <div class="content-note-right">
                                        <h4>说明</h4>
                                        <ul>
                                            <li>按阶梯比例的模式，可以在合同上设置是按阶梯提成还是按单提成，按阶梯则走统一阶梯计算，按单则单独计算。</li>
                                        </ul>
                                    </div>
                                </div>
                            </template>
                            
                            <!-- 会计服务提成 - 单会计负责模式 -->
                            <template v-else-if="activeNavItem === 'accounting-single'">
                                <div class="mode-info">
                                    <span class="mode-label">单会计负责模式</span>
                                    <span class="mode-status">未启用</span>
                                    <span class="mode-desc">单个客户的代账服务均由一个会计全部负责，按月计算提成</span>
                                    <button class="enable-btn" @click="handleEnableClick('accounting-single')">启用</button>
                                </div>
                                
                                <div class="setting-combined">
                                    <!-- 左侧内容区域 -->
                                    <div class="setting-content">
                                        <!-- 会计服务设置 -->
                                        <div class="setting-group">
                                            <h4>计提时机</h4>
                                            <div class="setting-row">
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-timing" checked :disabled="!moduleEnabled.accounting-single"> 按结账
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-timing" :disabled="!moduleEnabled.accounting-single"> 申报完成
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-timing" :disabled="!moduleEnabled.accounting-single"> 审账通过
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-timing" :disabled="!moduleEnabled.accounting-single"> 回款完成
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-timing" :disabled="!moduleEnabled.accounting-single"> 已结账且回款完成
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-timing" :disabled="!moduleEnabled.accounting-single"> 申报完成且回款完成
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-timing" :disabled="!moduleEnabled.accounting-single"> 审账通过且回款完成
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-timing" :disabled="!moduleEnabled.accounting-single"> 按照服务标记完成的时间
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <div class="setting-group">
                                            <h4>计提人</h4>
                                            <div class="setting-row">
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-person" checked :disabled="!moduleEnabled.accounting-single"> 提给账务会计
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-person" :disabled="!moduleEnabled.accounting-single"> 提给税务会计
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-person" :disabled="!moduleEnabled.accounting-single"> 提给服务顾问
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-person" :disabled="!moduleEnabled.accounting-single"> 账务完成人
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <div class="setting-group">
                                            <h4>提成逻辑</h4>
                                            <div class="setting-row">
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-logic" checked :disabled="!moduleEnabled.accounting-single"> 按代账月单价×比例提
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-logic" :disabled="!moduleEnabled.accounting-single"> 按固定金额提
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-logic" :disabled="!moduleEnabled.accounting-single"> 按照合同上的设置计提
                                                </label>
                                            </div>
                                            <div class="setting-row">
                                                <span class="setting-label">一般纳税人：</span>
                                                <input type="text" :disabled="!moduleEnabled.accounting-single" class="percentage-input" placeholder="%">
                                                        <span class="setting-label">小规模纳税人：</span>
                                                        <input type="text" :disabled="!moduleEnabled.accounting-single" class="percentage-input" placeholder="%">
                                            </div>
                                        </div>
                                        
                                        <div class="setting-group">
                                            <h4>提成基数</h4>
                                            <div class="setting-row">
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-base" checked :disabled="!moduleEnabled.accounting-single"> 按实际单价（减免、赠送后的实际单价）
                                                </label>
                                                <label class="radio-label-inline">
                                                    <input type="radio" name="accounting-base" :disabled="!moduleEnabled.accounting-single"> 按服务原价
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 自定义垂直分割线 -->
                                    <div class="custom-vertical-divider"></div>
                                    <!-- 右侧说明区域 -->
                                    <div class="content-note-right">
                                        <h4>说明</h4>
                                        <ul>
                                            <li>计提时机逻辑说明：</li>
                                            <li>①按结账，如1月账期的账套为结账状态，则提成提到2月</li>
                                            <li>②按申报完成，如1月所属期为申报完成状态，则提成提到2月</li>
                                            <li>③回款完成，能够达到预收的代账费要记账预收后再算提成，欠费的月份等到钱收回来了再算提成</li>
                                            <li>以"已结账且回款完成"为例，1月账期已收回，且已结账，就会计算到2月提成中，如果欠费到5月才收钱，则算到5月提成</li>
                                        </ul>
                                    </div>
                                </div>
                            </template>
                            
                            <!-- 会计服务提成 - 多会计分工模式 -->
                            <template v-else-if="activeNavItem === 'accounting-multi'">
                                <div class="mode-info">
                                    <span class="mode-label">多会计分工模式</span>
                                    <span class="mode-status">未启用</span>
                                    <span class="mode-desc">单个客户的记账、报税由不同的人负责，按月计算提成</span>
                                    <button class="enable-btn" @click="handleEnableClick('accounting-multi')">启用</button>
                                </div>
                                <!-- 账务会计 -->
                                <div class="role-section">
                                    <div class="role-header">
                                        <div style="display: flex; align-items: center;">
                                            <h4 style="margin: 0; margin-right: 10px;">账务会计</h4>
                                            <el-switch v-model="roleSwitches.accounting" @change="handleRoleSwitchChange('accounting')" :disabled="!moduleEnabled.accounting-multi"></el-switch>
                                        </div>
                                    </div>
                                    <div class="setting-combined">
                                        <!-- 左侧内容区域 -->
                                        <div class="setting-content">
                                            <div class="role-content">
                                                <div class="setting-group">
                                                    <h5>计提时机</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-timing" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 按结账
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 申报完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 审账通过
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 回款完成
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 已结账且回款完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 申报完成且回款完成
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 审账通过且回款完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 按照账务标记完成的时间
                                                        </label>
                                                    </div>
                                                </div>
                                                
                                                <div class="setting-group">
                                                    <h5>提成逻辑</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-logic" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 按代账月单价×比例提
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-logic" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 按固定金额提
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-logic" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 按照合同上的设置计提
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <span class="setting-label">一般纳税人：</span>
                                                        <input type="text" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting" class="percentage-input" placeholder="%">
                                                        <span class="setting-label">小规模纳税人：</span>
                                                        <input type="text" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting" class="percentage-input" placeholder="%">
                                                    </div>
                                                </div>
                                                
                                                <div class="setting-group">
                                                    <h5>提成基数</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-base" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 按实际单价（减免、赠送后的实际单价）
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-account-base" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.accounting"> 按服务原价
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 自定义垂直分割线 -->
                                        <div class="custom-vertical-divider"></div>
                                        <!-- 右侧说明区域 -->
                                        <div class="content-note-right">
                                             <h4>说明</h4>
                                            <ul>
                                                <li>计提时机逻辑说明</li>
                                                <li>①按结账，如1月账期的账套为结账状态，则提成提到2月</li>
                                                <li>②按申报完成，如1月所属期为申报完成状态，则提成提到2月</li>
                                                <li>③回款完成，能够达到预收的代账费要记账预收后再算提成，欠费的月份等到钱收回来了再算提成</li>
                                                <li>以"已结账且回款完成"为例，1月账期代账费已收，且已结账，就会计算到2月提成中，如果欠费到5月才收钱，则算到5月提成</li>
                                                <li>多角色分工的设置说明</li>
                                                <li>如果客户服务是分工的模式，可以选择算提成的角色，并且为其设置提成逻辑。开启了开关的角色会计算提成，未开启开关的角色不会计算提成。</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 税务会计 -->
                                <div class="role-section">
                                    <div class="role-header">
                                        <div style="display: flex; align-items: center;">
                                            <h4 style="margin: 0; margin-right: 10px;">税务会计</h4>
                                            <el-switch v-model="roleSwitches.tax" @change="handleRoleSwitchChange('tax')" :disabled="!moduleEnabled.accounting-multi"></el-switch>
                                        </div>
                                    </div>
                                    <div class="setting-combined">
                                        <!-- 左侧内容区域 -->
                                        <div class="setting-content">
                                            <div class="role-content">
                                                <div class="setting-group">
                                                    <h5>计提时机</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-timing" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.tax"> 按结账
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.tax"> 申报完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.tax"> 审账通过
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.tax"> 回款完成
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.tax"> 已结账且回款完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.tax"> 申报完成且回款完成
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-timing" :disabled="!roleSwitches.tax"> 审账通过且回款完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-timing" :disabled="!roleSwitches.tax"> 按照服务标记完成的时间
                                                        </label>
                                                    </div>
                                                </div>
                                                
                                                <div class="setting-group">
                                                    <h5>提成逻辑</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-logic" checked :disabled="!roleSwitches.tax"> 按代账月单价×比例提
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-logic" :disabled="!roleSwitches.tax"> 按固定金额提
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-logic" :disabled="!roleSwitches.tax"> 按照合同上的设置计提
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <span class="setting-label">一般纳税人：</span>
                                                        <input type="text" :disabled="!roleSwitches.consultant" class="percentage-input" placeholder="%">
                                                        <span class="setting-label">小规模纳税人：</span>
                                                        <input type="text" :disabled="!roleSwitches.consultant" class="percentage-input" placeholder="%">
                                                    </div>
                                                </div>
                                                
                                                <div class="setting-group">
                                                    <h5>提成基数</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-base" checked :disabled="!roleSwitches.tax"> 按实际单价（减免、赠送后的实际单价）
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-tax-base" :disabled="!roleSwitches.tax"> 按服务原价
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 自定义垂直分割线 -->
                                        <div class="custom-vertical-divider"></div>
                                        <!-- 右侧说明区域 -->
                                        <div class="content-note-right">
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 服务顾问 -->
                                <div class="role-section">
                                    <div class="role-header">
                                        <div style="display: flex; align-items: center;">
                                            <h4 style="margin: 0; margin-right: 10px;">服务顾问</h4>
                                            <el-switch v-model="roleSwitches.consultant" @change="handleRoleSwitchChange('consultant')"></el-switch>
                                        </div>
                                    </div>
                                    <div class="setting-combined">
                                        <!-- 左侧内容区域 -->
                                        <div class="setting-content">
                                            <div class="role-content">
                                                <div class="setting-group">
                                                    <h5>计提时机</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-timing" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 按结账
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 申报完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 审账通过
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 回款完成
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 已结账且回款完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 申报完成且回款完成
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 审账通过且回款完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 按照服务标记完成的时间
                                                        </label>
                                                    </div>
                                                </div>
                                                
                                                <div class="setting-group">
                                                    <h5>提成逻辑</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-logic" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 按代账月单价×比例提
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-logic" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 按固定金额提
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-logic" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 按照合同上的设置计提
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <span class="setting-label">一般纳税人：</span>
                                                        <input type="text" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant" class="percentage-input" placeholder="%">
                                                        <span class="setting-label">小规模纳税人：</span>
                                                        <input type="text" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant" class="percentage-input" placeholder="%">
                                                    </div>
                                                </div>
                                                
                                                <div class="setting-group">
                                                    <h5>提成基数</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-base" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 按实际单价（减免、赠送后的实际单价）
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-consultant-base" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.consultant"> 按服务原价
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 自定义垂直分割线 -->
                                        <div class="custom-vertical-divider"></div>
                                        <!-- 右侧说明区域 -->
                                        <div class="content-note-right">
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 审核会计 -->
                                <div class="role-section">
                                    <div class="role-header">
                                        <div style="display: flex; align-items: center;">
                                            <h4 style="margin: 0; margin-right: 10px;">审核会计</h4>
                                            <el-switch v-model="roleSwitches.audit" @change="handleRoleSwitchChange('audit')" :disabled="!moduleEnabled.accounting-multi"></el-switch>
                                        </div>
                                    </div>
                                    <div class="setting-combined">
                                        <!-- 左侧内容区域 -->
                                        <div class="setting-content">
                                            <div class="role-content">
                                                <div class="setting-group">
                                                    <h5>计提时机</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-timing" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 按结账
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 申报完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 审账通过
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 回款完成
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 已结账且回款完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 申报完成且回款完成
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 审账通过且回款完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 按照服务标记完成的时间
                                                        </label>
                                                    </div>
                                                </div>
                                                
                                                <div class="setting-group">
                                                    <h5>提成逻辑</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-logic" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 按代账月单价×比例提
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-logic" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 按固定金额提
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-logic" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 按照合同上的设置计提
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <span class="setting-label">一般纳税人：</span>
                                                        <input type="text" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit" class="percentage-input" placeholder="%">
                                                        <span class="setting-label">小规模纳税人：</span>
                                                        <input type="text" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit" class="percentage-input" placeholder="%">
                                                    </div>
                                                </div>
                                                
                                                <div class="setting-group">
                                                    <h5>提成基数</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-base" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 按实际单价（减免、赠送后的实际单价）
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-audit-base" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.audit"> 按服务原价
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 自定义垂直分割线 -->
                                        <div class="custom-vertical-divider"></div>
                                        <!-- 右侧说明区域 -->
                                        <div class="content-note-right">
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 开票员 -->
                                <div class="role-section">
                                    <div class="role-header">
                                        <div style="display: flex; align-items: center;">
                                            <h4 style="margin: 0; margin-right: 10px;">开票员</h4>
                                            <el-switch v-model="roleSwitches.invoice" @change="handleRoleSwitchChange('invoice')" :disabled="!moduleEnabled.accounting-multi"></el-switch>
                                        </div>
                                    </div>
                                    <div class="setting-combined">
                                        <!-- 左侧内容区域 -->
                                        <div class="setting-content">
                                            <div class="role-content">
                                                <div class="setting-group">
                                                    <h5>计提时机</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-timing" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 按结账
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 申报完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 审账通过
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 回款完成
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 已结账且回款完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 申报完成且回款完成
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 审账通过且回款完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 按照服务标记完成的时间
                                                        </label>
                                                    </div>
                                                </div>
                                                
                                                <div class="setting-group">
                                                    <h5>提成逻辑</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-logic" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 按代账月单价×比例提
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-logic" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 按固定金额提
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-logic" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 按照合同上的设置计提
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <span class="setting-label">一般纳税人：</span>
                                                        <input type="text" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice" class="percentage-input" placeholder="%">
                                                        <span class="setting-label">小规模纳税人：</span>
                                                        <input type="text" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice" class="percentage-input" placeholder="%">
                                                    </div>
                                                </div>
                                                
                                                <div class="setting-group">
                                                    <h5>提成基数</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-base" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 按实际单价（减免、赠送后的实际单价）
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-invoice-base" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.invoice"> 按服务原价
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 自定义垂直分割线 -->
                                        <div class="custom-vertical-divider"></div>
                                        <!-- 右侧说明区域 -->
                                        <div class="content-note-right">
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 账务完成人 -->
                                <div class="role-section">
                                    <div class="role-header">
                                        <div style="display: flex; align-items: center;">
                                            <h4 style="margin: 0; margin-right: 10px;">账务完成人</h4>
                                            <el-switch v-model="roleSwitches.finisher" @change="handleRoleSwitchChange('finisher')" :disabled="!moduleEnabled.accounting-multi"></el-switch>
                                        </div>
                                    </div>
                                    <div class="setting-combined">
                                        <!-- 左侧内容区域 -->
                                        <div class="setting-content">
                                            <div class="role-content">
                                                <div class="setting-group">
                                                    <h5>计提时机</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-timing" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 按结账
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 申报完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 审账通过
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 回款完成
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 已结账且回款完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 申报完成且回款完成
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 审账通过且回款完成
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-timing" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 按照服务标记完成的时间
                                                        </label>
                                                    </div>
                                                </div>
                                                
                                                <div class="setting-group">
                                                    <h5>提成逻辑</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-logic" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 按代账月单价×比例提
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-logic" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 按固定金额提
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-logic" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 按照合同上的设置计提
                                                        </label>
                                                    </div>
                                                    <div class="setting-row">
                                                        <span class="setting-label">一般纳税人：</span>
                                                        <input type="text" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher" class="percentage-input" placeholder="%">
                                                        <span class="setting-label">小规模纳税人：</span>
                                                        <input type="text" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher" class="percentage-input" placeholder="%">
                                                    </div>
                                                </div>
                                                
                                                <div class="setting-group">
                                                    <h5>提成基数</h5>
                                                    <div class="setting-row">
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-base" checked :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 按实际单价（减免、赠送后的实际单价）
                                                        </label>
                                                        <label class="radio-label-inline">
                                                            <input type="radio" name="accounting-finisher-base" :disabled="!moduleEnabled.accounting-multi || !roleSwitches.finisher"> 按服务原价
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 自定义垂直分割线 -->
                                        <div class="custom-vertical-divider"></div>
                                        <!-- 右侧说明区域 -->
                                        <div class="content-note-right">
                                        </div>
                                    </div>
                                </div>
                                
                            </template>
                            
                            <!-- 其他模式的内容 -->
                            <template v-else>
                                <div class="mode-info">
                                    <span class="mode-label">{{ getCurrentNavItem()?.name || '' }}</span>
                                    <span class="mode-status">{{ getCurrentNavItem()?.status || '' }}</span>
                                    <span class="mode-desc">该模式暂未启用，请点击启用按钮开启</span>
                                    <button class="enable-btn">启用</button>
                                </div>
                                <div class="content-note">
                                    <h4>说明</h4>
                                    <ul>
                                        <li>此模式尚未启用</li>
                                        <li>启用后可以进行相关参数配置</li>
                                    </ul>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else-if="activeName === 'second'" class="table-area">
          <div class="titile">
            <span>
              普通员工———普通员工只能看到计提人为自己的提成数据。
            </span>
            <el-divider />
            <span>
              提成管理员———可指定人员拥有提成管理的权限，可管理的范围为设置的部门内的员工为计提人的数据。
            </span>
          </div>
          <div class="table-content">
          <el-table :data="tableData2" border style="width: 100%">
            <el-table-column prop="id" label="id" width="100" />
            <el-table-column prop="range" label="提成管理范围" width="300" />
            <el-table-column prop="people" label="人员" />
            <el-table-column label="操作"></el-table-column>
          </el-table>
          </div>
        </div>
    </div>
    
    <!-- 批量设置对话框 -->
    <el-dialog
      v-model="dialogVisible.batchSetting"
      title="批量设置提成比例/金额"
      width="600px"
      @close="closeDialog('batchSetting')"
    >
      <div class="dialog-content">
        <h3>{{ 
          currentBatchType === 'regular' ? '常规代账合同批量设置' : 
          currentBatchType === 'single' ? '单次业务订单批量设置' :
          currentBatchType === 'field' ? '项目外勤批量设置' :
          currentBatchType === 'referral-cycle' ? '内部推荐-周期合同批量设置' :
          currentBatchType === 'referral-single' ? '内部推荐-单次业务批量设置' :
          '批量设置提成比例/金额'
        }}</h3>
        <div class="form-group">
          <label>适用范围：</label>
          <el-select style="width: 200px;">
            <el-option label="所有未设置的项目" value="all"></el-option>
            <el-option label="按客户名称筛选" value="by_customer"></el-option>
            <el-option label="按合同类型筛选" value="by_type"></el-option>
          </el-select>
        </div>
        <div class="form-group">
          <label>提成方式：</label>
          <el-radio-group>
            <el-radio label="percentage">按比例提成</el-radio>
            <el-radio label="fixed">按固定金额提成</el-radio>
          </el-radio-group>
        </div>
        <div class="form-group">
          <label>一般纳税人比例：</label>
          <el-input type="number" placeholder="输入百分比" style="width: 150px;"></el-input>
          <span>%</span>
        </div>
        <div class="form-group">
          <label>小规模纳税人比例：</label>
          <el-input type="number" placeholder="输入百分比" style="width: 150px;"></el-input>
          <span>%</span>
        </div>
      </div>
      <template #footer>
        <el-button @click="closeDialog('batchSetting')">取消</el-button>
        <el-button type="primary" @click="closeDialog('batchSetting')">确定</el-button>
      </template>
    </el-dialog>
    
    <!-- 增加档位对话框 -->
    <el-dialog
      v-model="dialogVisible.addLadder"
      title="增加提成档位"
      width="500px"
      @close="closeDialog('addLadder')"
    >
      <div class="dialog-content">
        <div class="form-group">
          <label>档位名称：</label>
          <el-input placeholder="请输入档位名称" style="width: 200px;"></el-input>
        </div>
        <div class="form-group">
          <label>业绩范围：</label>
          <el-input type="number" placeholder="起始金额" style="width: 150px;"></el-input>
          <span> 至 </span>
          <el-input type="number" placeholder="结束金额" style="width: 150px;"></el-input>
        </div>
        <div class="form-group">
          <label>提成比例：</label>
          <el-input type="number" placeholder="输入百分比" style="width: 150px;"></el-input>
          <span>%</span>
        </div>
        <div class="form-group">
          <label>适用对象：</label>
          <el-checkbox-group>
            <el-checkbox label="一般纳税人"></el-checkbox>
            <el-checkbox label="小规模纳税人"></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <template #footer>
        <el-button @click="closeDialog('addLadder')">取消</el-button>
        <el-button type="primary" @click="closeDialog('addLadder')">确定</el-button>
      </template>
    </el-dialog>
</template>

<style lang="less" scoped>
.dialog-content {
  .form-group {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    label {
      width: 120px;
      text-align: right;
      margin-right: 10px;
    }
  }
}
.my-clue {
    width: 100%;
    height: 100%;
    background-color: rgb(239,239,239);
    overflow: auto;
    
    // 顶部过滤器
    .top-filter {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        padding: 0 20px;
        box-sizing: border-box;
        position: sticky;
        top: 0;
        z-index: 9;
        
        &-left {
            height: 60px;
            display: flex;
            align-items: center;
            gap: 10px;
            
            &-btn {
                width: 80px;
                height: 30px;
                border-radius: 5px;
                border: 1px solid #ccc;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                user-select: none;
                
                &-icon {
                    width: 20px;
                    height: 20px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                
                // 未禁用的radio按钮样式更亮
                input[type="radio"]:not([disabled]) {
                    &:checked + span {
                        color: #409eff;
                    }
                    
                    &::after {
                        background-color: #409eff;
                    }
                }
                
                // 未禁用的checkbox样式更亮
                input[type="checkbox"]:not([disabled]) {
                    &:checked {
                        background-color: #409eff;
                    }
                }
                }
            }
            
            &-search {
                width: 200px;
            }
        }
    }
    
    // 表单和操作过滤器
    .top-filter-form, 
    .top-filter-operate {
        width: 400px;
        background-color: #fff;
    }
    
    // 表格区域
    .table-area {
        width: 94%;
        margin: 20px auto;
        box-shadow: 0 0 10px 0 #ddd;
        background-color: #fff;
        padding: 10px 20px;
        box-sizing: border-box;
        
        &-tab {
            width: 100%;
            box-sizing: border-box;
        }
        
        &-table {
            width: 100%;
            box-sizing: border-box;
            min-height: 600px;
        }
        
        /* 左右分栏布局 */
        .commission-layout {
            display: flex;
            width: 100%;
            min-height: 100%;
        }
        
        /* 左侧导航 */
        .left-nav {
            width: 200px;
            border-right: 1px solid #e0e0e0;
            padding: 20px 0;
            
            .nav-group {
                margin-bottom: 20px;
                
                .nav-title {
                    font-weight: bold;
                    padding: 10px 20px;
                    color: #606266;
                    font-size: 14px;
                }
                
                .nav-item {
                    padding: 12px 20px;
                    cursor: pointer;
                    font-size: 14px;
                    position: relative;
                    transition: all 0.3s;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    
                    &:hover {
                        background-color: #f5f7fa;
                    }
                    
                    &.active {
                        background-color: #ecf5ff;
                        color: #409eff;
                        border-left: 3px solid #409eff;
                    }
                    
                    .status {
                        font-size: 12px;
                        color: #909399;
                    }
                }
            }
        }
        
        /* 右侧内容区域样式 */
        .right-content {
            flex: 1;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            margin-left: 20px;
            
            .content-header h3 {
                margin: 0 0 20px 0;
                color: #303133;
            }
            
            /* 模式信息样式 */
            .mode-info {
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                padding: 15px 20px;
                border-radius: 4px;
                gap: 15px;
                
                .mode-label {
                    font-size: 15px;
                    font-weight: bold;
                    margin-right: 15px;
                    color: #333;
                }
                
                .mode-status {
                    padding: 4px 8px;
                    background-color: #f0f0f0;
                    border-radius: 4px;
                    font-size: 14px;
                    margin-right: 15px;
                    color: #666;
                }
                
                .mode-desc {
                    color: #606266;
                    font-size: 14px;
                    margin-right: auto;
                    flex: 1;
                }
                
                .enable-btn {
                    background-color: #409EFF;
                    color: white;
                    border: none;
                    padding: 6px 16px;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 14px;
                    
                    &:hover:not(:disabled) {
                        background-color: #66b1ff;
                    }
                    
                    &:disabled {
                        background-color: #c0c4cc;
                        cursor: not-allowed;
                    }
                }
            }
            
            /* 合并设置区域样式 - 设置整体背景色 */
            .setting-combined {
                display: flex;
                margin-bottom: 20px;
                gap: 20px;
                background-color: #f9f9f9;
                border-radius: 6px;
                overflow: hidden;
                padding: 20px;
                align-items: flex-start;
                
                /* 左侧内容区域 */
                .setting-content {
                    flex: 1;
                    padding: 10px;
                    
                    /* 设置组样式 - 移除背景色，使用统一的整体背景色 */
                    .setting-group {
                        margin-bottom: 25px;
                        padding: 15px;
                        border-radius: 6px;
                        
                        h4 {
                            margin-top: 0;
                            margin-bottom: 15px;
                            color: #333;
                        }
                    }
                    
                    /* 行内设置项样式 */
                    .setting-row {
                        display: flex;
                        align-items: center;
                        margin-bottom: 15px;
                        flex-wrap: wrap;
                        
                        .setting-label {
                            font-weight: 500;
                            color: #555;
                            margin-right: 15px;
                            min-width: 150px;
                        }
                        
                        .radio-label-inline,
                        .checkbox-label-inline {
                            display: inline-flex;
                            align-items: center;
                            margin-right: 20px;
                            font-weight: normal;
                            cursor: pointer;
                            color: #333;
                            
                            input {
                                margin-right: 6px;
                            }
                        }
                        
                        .setting-info-inline {
                            margin: 0 20px 0 auto;
                            font-size: 13px;
                            color: #666;
                        }
                        
                        .batch-btn {
                            background-color: #67c23a;
                            color: white;
                            border: none;
                            padding: 6px 12px;
                            border-radius: 4px;
                            cursor: pointer;
                            font-size: 13px;
                            
                            &:hover:not(:disabled) {
                                background-color: #85ce61;
                            }
                            
                            &:disabled {
                                background-color: #c0c4cc;
                                cursor: not-allowed;
                            }
                        }
                    }
                }
                
                /* 右侧说明区域样式 - 固定宽度，放在最右侧 */
                .content-note-right {
                    font-size: small;
                    width: 200px;
                    min-width: 200px;
                    padding: 15px;
                    border-radius: 6px;
                    height: fit-content;
                    padding: 10px;
                    
                    h4 {
                        margin-top: 0;
                        margin-bottom: 10px;
                        color: #333;
                    }
                    
                    ul {
                        margin: 0;
                        padding-left: 20px;
                        color: #666;
                        
                        li {
                            margin-bottom: 5px;
                        }
                    }
                }
                
                /* 自定义垂直分割线样式 */
                .custom-vertical-divider {
                    width: 1px;
                    min-height: 400px;
                    background-color: #dcdfe6;
                    background-image: linear-gradient(to bottom, #dcdfe6 50%, transparent 50%);
                    background-size: 1px 8px;
                    margin: 0 5px;
                    align-self: center;
                }
            }
            
            /* 内容说明样式 */
            .content-note {
                background-color: #fff7e6;
                border-left: 4px solid #e6a23c;
                padding: 15px;
                border-radius: 0 4px 4px 0;
                margin-top: 20px;
                
                h4 {
                    margin: 0 0 10px 0;
                    color: #e6a23c;
                }
                
                ul {
                    margin: 0;
                    padding-left: 20px;
                    color: #606266;
                    
                    li {
                        margin-bottom: 5px;
                    }
                }
            }
            
            /* 标题和表格内容样式 */
            .title {
                padding: 20px 50px;
            }
            
            .table-content {
                padding: 20px 10px;
            }
            
            /* 百分比输入框样式 */
            .percentage-input {
                width: 80px;
                padding: 5px 10px;
                border: 1px solid #dcdfe6;
                border-radius: 4px;
                margin: 0 10px;
            }

            /* 统一表单元素禁用样式 */
            .percentage-input:disabled,
            .role-content input[type="radio"]:disabled,
            .role-content input[type="checkbox"]:disabled,
            .role-content input[type="text"]:disabled {
                background-color: #f5f7fa;
                color: #c0c4cc;
                cursor: not-allowed;
            }
            
            /* 禁用状态下的标签样式 */
            .role-content input[type="radio"]:disabled + label,
            .role-content input[type="checkbox"]:disabled + label {
                color: #c0c4cc;
                cursor: not-allowed;
            }
            
            /* 阶梯设置样式 */
            .ladder-setting {
                margin-top: 10px;
                
                .add-ladder-btn {
                    padding: 6px 12px;
                    background-color: #409eff;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: background-color 0.3s;
                    
                    &:hover:not(:disabled) {
                        background-color: #66b1ff;
                    }
                    
                    &:disabled {
                        background-color: #a0cfff;
                        cursor: not-allowed;
                    }
                }
            }
            
            /* 角色设置样式 */
            .role-setting {
                margin-bottom: 20px;
                border-radius: 6px;
                overflow: hidden;
                
                .role-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 15px 20px;
                    background-color: white;
                    
                    h4 {
                        margin: 0;
                        color: #303133;
                        font-size: 16px;
                    }
                    
                    .role-switch {
                        width: 40px;
                        height: 20px;
                        border-radius: 10px;
                        background-color: #dcdfe6;
                        position: relative;
                        appearance: none;
                        cursor: pointer;
                        transition: background-color 0.3s;
                        
                        &:checked {
                            background-color: #409eff;
                        }
                        
                        &::after {
                            content: '';
                            position: absolute;
                            width: 16px;
                            height: 16px;
                            border-radius: 50%;
                            background-color: white;
                            top: 2px;
                            left: 2px;
                            transition: left 0.3s;
                        }
                        
                        &:checked::after {
                            left: 22px;
                        }
                    }
                }
                
                .role-content {
                    padding: 20px;
                    background-color: #f9f9f9;
                    
                    .setting-group {
                        margin-bottom: 20px;
                        
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}
</style>